<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天祥瑞饲料</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" id="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<link href="./css/online-message.css" rel="stylesheet" type="text/css">
<link href="./css/online-msg.css" rel="stylesheet" type="text/css">
<link href="./css/reset.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
</head>

<body>
<div id="qq">
	<title>天祥瑞饲料</title>
	<!-- <p>有什么想要留言的?</p> -->
	<textarea type="text" id="mContent" class="message" placeholder="有什么想要留言的?" style="color: #333;" contentEditable='true'></textarea>
	
</div>
<div class="header">
	<a href="javascript:history.back()" class="left"></a>
	<p class="headerText">留言反馈</p>
</div>
<div class="But">
	<p class='submit' onclick="onlineMsg()">发表</p>
	<!--face end-->
</div>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//从缓存中获取数据并渲染
	let msgBoxList = JSON.parse(window.localStorage.getItem('msgBoxList')) || [];
	//innerHTMl(msgBoxList)

	//点击小图片，显示表情
	$(".bq").click(function (e) {
		$(".face").slideDown(); //慢慢向下展开
		e.stopPropagation(); //阻止冒泡事件
	});

	//在桌面任意地方点击，关闭表情框
	$(document).click(function () {
		$(".face").slideUp(); //慢慢向上收
	});

	//点击小图标时，添加功能
	$(".face ul li").click(function () {
		let simg = $(this).find("img").clone();
		$(".message").append(simg); //将表情添加到输入框
	});

	//点击发表按扭，发表内容
	$("span.submit").click(function () {
		let txt = $(".message").html(); //获取输入框内容
		if (!txt) {
			$('.message').focus(); //自动获取焦点
			return;
		}
		let obj = {
			msg: txt
		}
		msgBoxList.unshift(obj) //添加到数组里
		window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
		//innerHTMl([obj]) //渲染当前输入框内容
		$('.message').html('') // 清空输入框

	});

	//删除当前数据
	$("body").on('click', '.del', function () {
		let index = $(this).parent().parent().index();
		msgBoxList.splice(index, 1)
		window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
		$(this).parent().parent().remove()
	})

</script>

<script type="text/javascript">
	function onlineMsg(){
		var fileupload=$("#fileupload").val();
		var mContent=$("#mContent").val();
		
		if (mContent.length < 5){
			layer.msg("留言字数不可小于五个字符");
			return;
		}
		
	 	$.post("../../../tszs/txr/offlinePurchaseone.do?mContent="+mContent,function(data){
			layer.msg("留言成功！");
			setTimeout(function(){
				location.href="index.jsp";
			}, 800)
		},"json")
	}
	function datails(mId){
		window.location.href="MessageDetails.jsp?mId="+mId;
	}
</script>
</body>
</html>